<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击关闭广告</title>
    <style>
        .广告版面 {
            position: relative; /* 定位:相对定位 子绝父相定位方法 */

            width: 1000px; /* 宽高 */
            height: 200px;
            background-color: pink; /* 背景色 */
            margin: 10px auto; /* 版心居中 */

            font-size: 50px; /* 文字大小 */
            font-weight: 700; /* 文字加粗 */
            text-align: center; /* 文字水平居中 */
            line-height: 200px; /* 行高以盒子高相同, 效果文字垂直居中 */
        }

        .关闭按钮 {
            position: absolute; /* 定位:相对定位 子绝父相定位方法 */
            right: 20px; /* 定位 偏移量 */
            top: 10px;

            width: 20px; /* 宽高 背景色 */
            height: 20px;
            background-color: skyblue;

            font-size: 16px; /* 文字大小 */
            text-align: center; /* 文字水平居中 */
            line-height: 20px; /* 行高以盒子高相同, 效果文字垂直居中 */

            cursor: pointer; /* 鼠标放到盒子时, 鼠标形状改变 */
        }
    </style>

</head>
<body>
<!--案例: 点击X 关闭广告-->
<div class="广告版面">
    我是广告1,点击X关闭
    <div class="关闭按钮">X</div>
</div>

<div class="广告版面">
    我是广告2,点击X关闭
    <div class="关闭按钮">X</div>
</div>

<div class="广告版面">
    我是广告3,点击X关闭
    <div class="关闭按钮">X</div>
</div>

<!--
这个案例, 事件监听 里做过
这里我们使用 节点 的方法,更加简洁
注意: 上面CSS类名相同,如果使用 事件监听 的方法来做会非常麻烦的
-->

<script>
    // 获取DOM元素, 这里获取所有 关闭按钮
    const 关闭按钮_数组 = document.querySelectorAll('.关闭按钮')
    // 循环监控 点击事件
    for (let i = 0; i < 关闭按钮_数组.length; i++) {
        关闭按钮_数组[i].addEventListener('click', function () {
            // this 指向的就是自己,这里是 "关闭按钮", 由于操作多个同名使用这里只能使用 this
            // 点击那个 "关闭按钮", 就操作那个父级
            this.parentNode.style.display = 'none' // 这里调用父级节点, 操作父级 关闭父级
        })
    }

</script>
</body>
</html>